<template>
	<div class="zh-classroom-visits">
		<el-select v-model="school_code" clearable @clear="restData" @change="getValue" v-if="$store.state.platformInformation" filterable style="width: 10%;position: absolute;left:20px;top:74px;z-index:9999;" placeholder="教育局/学校">
			<el-option
			v-for="item in schoolcodeData"
			:key="item.id"
			:label="item.name"
			:value="item.app_code">
			</el-option>
		</el-select>
		<el-button type="primary" class="resetBtns" @click.stop="refreshHands">刷新</el-button>
		<nav-header></nav-header>
		<el-tabs v-model="activeName" type="card" @tab-click="changeTab">
			<template v-for="(val, inx) in roleTypeData">
				<el-tab-pane :disabled="isShowRole" :label="val.name" :key="inx" :name="'tab-' + inx">
					<div class="classroom-pane">
					<div class="tour-course">
						<div class="tour-course-menu">
							<div class="course-setup">
								<div class="course-setup-h clear">
									<span>校园分区</span>
									<i class="el-icon-setting fr" @click="setupOFF = !setupOFF"></i>
								</div>
								<div class="course-setup-op" v-if="setupOFF">
									<p>设置时间，定时切换直播界面</p>
									<div class="course-setup-off">
										<el-switch
											v-model="switchOFF"
											@change="changeTimeset"
											:active-text="switchOFF == true ? '已启用' : '已关闭'">
										</el-switch>
									</div>
									<div class="course-setup-time" v-if="switchOFF">
										<el-form :model="timeForm" :rules="rules" ref="timeForm">
											<el-form-item prop="time">
												<el-input v-model="timeForm.time" type="number" placeholder="请输入整数" clearable></el-input>
											</el-form-item>
											<el-form-item>
												<el-select v-model="timeForm.format" placeholder="请选择">
													<!-- <el-option label="S"  value="1"> </el-option> -->
													<el-option label="M"  value="2"> </el-option>
													<el-option label="H"  value="3"> </el-option>
												</el-select>
											</el-form-item>
										</el-form>
									</div>
									<div class="course-setup-btn" v-if="switchOFF">
										<el-button type="primary" @click="saveTimeset('timeForm')">确定</el-button>
									</div>
								</div>
							</div>
							<div class='checked_vc'>
								<el-row>
									<el-col :span="12">
										<span @click="checkedChange(0, 1)" :class="listParam.inspection_type === 0 ? 'is-active' : ''">所有分区</span>
									</el-col>
									<el-col :span="12">
										<span @click="checkedChange(1, 1)" :class="listParam.inspection_type === 1 ? 'is-active' : ''">教室分区</span>
									</el-col>
								</el-row>
							</div>
							<el-scrollbar class="menuNev" v-loading="ins_loading.status" v-if="isShow > 0">
								<el-menu default-active="1" class="el-menu-vertical-demo" unique-opened @open="handleOpen" @close="handleClose">
									<el-submenu v-for="(item, index) in getInspectionData" :key="item.id + ''" :index="index + ''">
										<template slot="title">
											<i class="el-icon-location"></i>
											<span>{{ item.name }}</span>
										</template>
										<el-menu-item
											v-for="(item2, index2) in item.children"
											:key="item2.id + ''"
											:index="index + '-' + index2"
											@click="changeClassROOM(item2.id)"
										>
											<template slot="title">
												<i style="padding-left: 25px"></i>
												<span>{{ item2.name }}</span>
											</template>
										</el-menu-item>
									</el-submenu>
									<el-menu-item id="hiddenmenu" index="hidden-4"></el-menu-item>
								</el-menu>
							</el-scrollbar>
							<template v-else>
								<div class="menuNev nothing-logo">
									<div>
										<img :src="nothingLogo" />
									</div>
								</div>
							</template>
							<div class="video-mode" v-show="0">
								<div class="video-mode-h">显示模式</div>
								<div class="video-mode-l">
									<button type="text" v-for="(item, index) in btn" :key="index" :class="{ active: isActive == index }" @click="btcActive(index)">
										<i :class='`xun xunke_but${item.id}`' ></i>
									</button>
								</div>
							</div>
						</div>
						<!--  -->
						<div class="course-video" v-loading="rec_loading.status">
							<div class="course-mb">
								<el-button type="text" icon="el-icon-arrow-left" :disabled="youCanClick" v-show="pageMax > 1 && listParam.page_index > 1" @click="changePage(0)"></el-button>
								<div class="course-pd">
									<!-- 2 *2  -->
									<div class="videoPN" v-if="isActive == 0 && activeIndex === inx">
										<template  v-for="n in 4">
											<div class="videoMp video_1" :key="n" v-if="showChange">
												<div v-if="n > listData.length" class="no-signal">no signal</div>
												<videoPlayer  v-if="n <= listData.length" :listData="[listData[n - 1]]" :liveUrl="liveUrl"></videoPlayer>
											</div>
										</template>

									</div>
									<!-- 3 * 1  -->
									<div class="videoPN" v-if="isActive == 1 && activeIndex === inx">
										<div class="videoPN_l">
											<div class="videoMp video_2"  v-if="showChange">
												<div v-if="listData.length < 1" class="no-signal">no signal</div>
												<videoPlayer v-if="listData.length >= 1" :listData="[listData[0]]" :liveUrl="liveUrl"></videoPlayer>
											</div>
											<div class="videoMp video_2"  v-if="showChange">
												<div v-if="listData.length < 2" class="no-signal">no signal</div>
												<videoPlayer v-if="listData.length >= 2" :listData="[listData[1]]" :liveUrl="liveUrl"></videoPlayer>
											</div>
											<div class="videoMp video_2"  v-if="showChange">
												<div v-if="listData.length < 3" class="no-signal">no signal</div>
												<videoPlayer v-if="listData.length >= 3" :listData="[listData[2]]" :liveUrl="liveUrl"></videoPlayer>
											</div>
										</div>
										<div class="videoPN_r">
											<div class="videoMp video_2r"  v-if="showChange">
												<div v-if="listData.length < 4" class="no-signal">no signal</div>
												<videoPlayer v-if="listData.length >= 4" :listData="[listData[3]]" :liveUrl="liveUrl"></videoPlayer>
											</div>
										</div>
									</div>

									<!-- 1 * 2  -->
									<div class="videoPN" v-if="isActive == 2 && activeIndex === inx">
										<div class="videoPN_vl">
											<div class="videoMp video_3"  v-if="showChange">
												<div v-if="listData.length < 1" class="no-signal">no signal</div>
												<videoPlayer v-if="listData.length >= 1" :listData="[listData[0]]" :liveUrl="liveUrl"></videoPlayer>
											</div>
										</div>
										<div class="videoPN_vr">
											<div class="videoMp video_3"  v-if="showChange">
												<div v-if="listData.length < 2" class="no-signal">no signal</div>
												<videoPlayer v-if="listData.length >= 2" :listData="[listData[1]]" :liveUrl="liveUrl"></videoPlayer>
											</div>
											<div class="videoMp video_3"  v-if="showChange">
												<div v-if="listData.length < 3" class="no-signal">no signal</div>
												<videoPlayer v-if="listData.length >= 3" :listData="[listData[2]]" :liveUrl="liveUrl"></videoPlayer>
											</div>
										</div>

									</div>

									<!-- 3 * 3  -->
									<div class="videoPN" v-if="isActive == 3 && activeIndex === inx">
										<template  v-for="n in 9">
											<div class="videoMp video_4" :key="n"  v-if="showChange">
												<div v-if="n > listData.length" class="no-signal">no signal</div>
												<videoPlayer v-if="n <= listData.length" :listData="[listData[n - 1]]" :liveUrl="liveUrl"></videoPlayer>
											</div>
										</template>
									</div>
								</div>
								<el-button type="text" :disabled="youCanClick" icon="el-icon-arrow-right" v-show="pageMax > listParam.page_index" @click="changePage(1)"></el-button>
							</div>
              				<span class="paly-tips">多画面同时播放时可能受电脑配置问题会造成卡顿</span>
						</div>
					</div>
					</div>
				</el-tab-pane>
            </template>
        </el-tabs>
	</div>
</template>

<script>
import videoPlayer from './video'
let btn = [
	{ id: 1, name: '1', size: '4' },
	{ id: 2, name: '2', size: '4' },
	{ id: 3, name: '3', size: '3' },
	{ id: 4, name: '4', size: '9' }
]
export default {
	components: {
		videoPlayer,
	},
	data() {
		return {
			Props: {
				value: 'app_code',
				label: 'name',
				checkStrictly: true
			},
			check_rolebaseid: '',
			educationCodeData: [],
			isTopEducation: sessionStorage.getItem('CheckSchoolAppCode') === '00000000000000000000000000000000',
			school_code: '',
			schoolcodeData: [],
			showChange: true,
			isShow: 0,
			activeName: 'tab-0',
			activeIndex: 0,
			roleTypeData: [],
			nothingLogo: '/static/image/affairs/u1300.png',
			ins_loading: {
				status: false,
			},
			rec_loading: {
				status: false,
			},
			liveUrl: '',
			btn: btn,
			isActive: 0,
			getInspectionData: [],
			listParam: {
				app_code: sessionStorage.getItem('CheckSchoolAppCode'),
				role_id: null,
				inspection_type: 0, // 分区
				inspection_id: 0, // 设备id
				page_index: 1,
				page_size: btn[1].size,
				user_base_id: '',
				is_down: 0,
				// is_readdown: 1,
				// type: [0, 1, 2, 10],
			},
			pageMax: 0,
			listData: [],
			typeArr: { 0: '0620', 1: '0600B', 2: '0650', 3: 'rtmp', 4: 'rtsp', 5: '奥威亚', 6: '网动', 7: '中庆', 8: '锐取', 9: '0683', 10: '0660' },
			operateCommonArr: {
				0: {
					'无法连接': [],
					'无法识别': [],
					'录播中': [2, 3, 4, 5, 6, 7],
					'直播中': [1, 3, 4, 5, 6, 7],
					'录制中': [1, 2, 5, 6, 7],
					'停止': [1, 2, 3, 6, 7]
				},
				1: {
					'无法连接': [],
					'无法识别': [],
					'录播中': [22, 21, 8],
					'停止': [20, 8]
				},
				2: {
					'无法连接': [],
					'无法识别': [],
					'录播中': [9, 11, 12, 13],
					'停止': [10, 13],
					'已暂停': [10, 12, 13]
				},
				9: {
					'不在线': [],
					'在线': []
				},
				10: {
					'无法连接': [],
					'无法识别': [],
					'录播中': [25, 27, 28],
					'停止': [26],
					'已暂停': [26, 28]
				}
			},
			operateArr: {
				0: '尝试开机', 4: '预览', 1: '录播', 2: '直播', 3: '录制', 5: '停止', 6: '重启', 7: '关机',
				22: '预览', 20: '录播', 21: '停止', 8: '高级配置界面',
				14: '唤醒', /*9:'预览', */10: '录播', 11: '暂停', 12: '停止'/*,13:'高级配置界面'*/, 15: '软关机',
				25: '预览', 26: '录播', 27: '暂停', 28: '停止',
			},
			checked: false,
			setupOFF: false,
			switchOFF: false,
			timeForm: {
				format: '2',
				time: ''
			},
			rules: {
				time: [
					{ required: true, validator: this.validateTime, trigger: 'blur' }
				]
			},
			timer: null,
			timeFormCopy: {
				format: '2',
				time: ''
			},
			isShowRole: false,
			youCanClick: false,

			isExist: false,  // 用于点击下一页时销毁上一页的播放器
		}
	},
	async created() {
		this.isExist = true
		await this.getRole();
		await this.get_schoolcode();
		await this.get_educationData();
		await this.getUserInfo();
	},
	destroyed() {
		// 销毁定时器
		this.timer && clearTimeout(this.timer);
		this.timer = null;
		this.listData = null;
		this.getInspectionData = null;
	},
	watch: {
		'pageMax'() {
			this.loopScreen();
		},
		'listData'() {
			if (this.pageMax <= 1) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
	},
	methods: {
		restData() {
			this.isShowRole = false
			this.listParam = {
				app_code: sessionStorage.getItem('CheckSchoolAppCode'),
				role_id: null,
				inspection_type: 0,
				inspection_id: -1,
				page_index: 1,
				page_size: btn[1].size,
				user_base_id: '',
				is_down: 0,
			}
			this.getRole();
		},
		getAllid(val) {
			this.isShowRole = true
			this.school_code = val[val.length - 1]
			this.listParam.app_code = this.school_code
			this.listParam.is_down = 1
			this.listParam.user_base_id = JSON.parse(sessionStorage.getItem('user_info_str')).check_rolebaseid
			this.getInspection();
			this.getRecorderData();
		},
		getUserInfo() { // 获取用户信息，
			let success = res => {
				// 用户权限
				this.check_rolebaseid = parseInt(res.data.userinfo.check_rolebaseid)
			}
			this.$ajax.get('/api/login/login', { func: { success } })
		},
		get_educationData() { // 最高教育局获取所有教育局/学校
			let params = {
				type: 1,
				is_havemyself: 1,
			}
			let success = res => {
				let arr = JSON.parse(JSON.stringify(res.data));
				this.educationCodeData = res.data
			}
			this.$ajax.get('api/newlevel/levelorg_list', { params, func: { success } })
		},
		getValue(val) {
			this.isShowRole = true
			this.school_code = val
			this.listParam.app_code = this.school_code
			this.listParam.is_down = 1
			this.listParam.user_base_id = JSON.parse(sessionStorage.getItem('user_info_str')).check_rolebaseid
			this.getInspection();
			this.getRecorderData();
		},
		get_schoolcode() { /*获取学校教育局 */
			let params = {
				app_code: sessionStorage.getItem('CheckSchoolAppCode')
			}
			let success = res => {
				this.schoolcodeData = res.data
			}
			this.$ajax.get('api/group/get_platform_org', { params, func: { success } })
		},
		changeTab(tab, event) {
			let inx = parseInt(tab.index);
			if (inx !== this.activeIndex) {
				this.activeIndex = inx;
				this.listParam.inspection_type = 0;
				this.listParam.inspection_id = 0
				this.listParam.role_id = this.roleTypeData[inx].id;
				this.getInspection();
				this.getRecorderData();
			}
		},
		getRole() {
			let success = (data => {

				this.roleTypeData = data.data;
				if (this.roleTypeData.length > 0) {
					this.listParam.role_id = this.roleTypeData[0].id;

					this.getInspection();
					this.getRecorderData();
					this.getTimeset();
					this.getLiveUrl();
				}
			});

			let fail = (data => {
				this.$message.error(data.msg);
			});
			// is_have_me:1
			this.$ajax.get('api/role/role', { params: { is_have_me: 1 }, func: { success: success, fail: fail } });
		},
		loopScreen() {
			if (this.switchOFF === true && this.pageMax > 1) {
				let time = null;
				let that = this;

				switch (this.timeFormCopy.format) {
					case '1':
						time = parseInt(this.timeFormCopy.time) * 1000;
						break;
					case '2':
						time = parseInt(this.timeFormCopy.time) * 1000 * 60;
						break;
					case '3':
						time = parseInt(this.timeFormCopy.time) * 1000 * 60 * 60;
						break;
				}

				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					if (that.pageMax > that.listParam.page_index) {
						that.listParam.page_index++;
					} else {
						that.listParam.page_index = 1;
					}
					clearTimeout(that.timer)
					that.getRecorderData();
					that.loopScreen();
				}, time);
			}
		},
		changeTimeset() {
			if (this.switchOFF === false) {
				let success = (data => {
					this.setupOFF = false;
					clearTimeout(this.timer);
					this.timer = null;
					this.$message({ message: data.msg, type: 'success' });
				})
				let params = {
					open: '0',
					timeset: ''
				}

				this.$ajax.post('api/school/inspection_timeset', params, { func: { success: success } })
			}
		},
		saveTimeset(formName) {
			this.$refs[formName][this.activeIndex].validate((valid) => {
				if (valid) {
					let time = '';
					if (this.timeForm.format === '1') {
						time = '*1';
					} else if (this.timeForm.format === '2') {
						time = '*60';
					} else if (this.timeForm.format === '3') {
						time = '*3600';
					}

					let params = {
						open: this.setupOFF === false ? '0' : '1',
						timeset: this.timeForm.time + time
					}
					let success = (data => {
						this.timeFormCopy = {
							time: this.timeForm.time,
							format: this.timeForm.format
						}

						this.setupOFF = false;
						clearTimeout(this.timer);
						this.loopScreen();
						this.$message({ message: data.msg, type: 'success' });

					})

					this.$ajax.post('api/school/inspection_timeset', params, { func: { success: success } })
				} else {
					return false;
				}
			});
		},
		validateTime(rule, value, callback) {
			if (!value) {
				return callback(new Error('请输入整数'));
			}
			if ((Number(value) | 0) !== Number(value)) {
				return callback(new Error('请输入整数'));
			}

			if (this.timeForm.format == 1) {
				if (value < 10 || value > 99) {
					callback(new Error('输入值在 10 - 99 之间'));
				} else {
					callback();
				}
			} else {
				if (value < 1 || value > 99) {
					callback(new Error('输入值在 1 - 99 之间'));
				} else {
					callback();
				}
			}
		},
		checkedChange(type, val) {
			// type 0 所有分区 ，1教室分区
			this.listParam.inspection_type = type;
			this.getInspection();
			if (this.isShow) {
				this.getRecorderData(val);
			}
		},
		getTimeset() {
			let success = (data => {
				this.switchOFF = data.data.open === 1 ? true : false;
				if (this.switchOFF) {
					let timeSet = data.data.timeset;
					let result = timeSet.split('*');

					this.timeFormCopy = {
						time: result[0],
					}

					this.timeForm.time = result[0];
					if (result[1] === '3600') {
						this.timeForm.format = '3';
						this.timeFormCopy.format = '3';
					} else if (result[1] === '60') {
						this.timeForm.format = '2';
						this.timeFormCopy.format = '2';
					} else {
						this.timeForm.format = '1';
						this.timeFormCopy.format = '1';
					}
				}
			})

			this.$ajax.get('api/school/inspection_timeset', { func: { success: success } })
		},
		getLiveUrl() {
			let success = (data => {
				// console.log(data,'this.liveUrlthis.liveUrlthis.liveUrl')
				this.liveUrl = data.data;
				console.log('url', this.liveUrl)
			})
			this.$ajax.get('api/recorder/live_url', { func: { success: success } })
		},
		changePage(type) {
			this.isExist = false
			this.youCanClick = true
			this.listData = []
			if (type === 1) {
				this.listParam.page_index++;
			} else {
				this.listParam.page_index--;
			}
			this.getRecorderData();
			setTimeout(() => {
				this.youCanClick = false
			}, 2000)
			// this.$nextTick(() => {
			// 	this.isExist = true
			// })

		},
		refreshHands() {
			this.getRecorderData();
		},
		changeClassROOM(ID) {
			// this.player && this.player.pause();
			this.listParam.inspection_id = ID;
			this.listParam.page_index = 1;
			this.getRecorderData();
		},
		getInspection() {
			this.ins_loading.status = true;
			let success = (data => {
				this.ins_loading.status = false;
				this.getInspectionData = data.data;
				// console.log(JSON.parse(JSON.stringify(data.data)), '分区')
				this.isShow = data.data.length;
			})

			let fail = (data => {
				this.ins_loading.status = false;
				this.$message.error(data.msg)
			})

			let params = {
				app_code: this.listParam.app_code,
				role_id: this.listParam.role_id,
				inspection_type: this.listParam.inspection_type,
				is_down: this.listParam.is_down,
				user_base_id: this.listParam.user_base_id
			}

			//执行请求，并将回调方法变成config成员以便鉴权过期可以执行 api/school/platform_get_inspection
			this.$ajax.get('api/school/inspection_data', { params: params, func: { success: success, fail: fail } })
		},
		getRecorderData(val) { // 设备
			this.showChange = false;
			this.rec_loading.status = true;

			let success = (data => {
				this.showChange = true;
				this.rec_loading.status = false;
				this.listData = data.data.data;
				this.getListAfter();
				this.pageMax = data.data.page_max;
				console.log('看这里', this.listData)

			})
			let fail = (data => {
				this.showChange = true;
				this.rec_loading.status = false;
				this.$message.error(data.msg);
			})

			if (val === 1) {
				this.listParam.inspection_id = 0;
			}
			this.$ajax.get('api/recorder/recorder_list', { params: this.listParam, func: { success: success, fail: fail } })
		},
		async getListAfter() {
			if (this.listData.length > 0) {
				for (var i = 0; i < this.listData.length; i++) {
					this.listData[i].recorder_status = null;
					this.listData[i].opArr = [];

					if (parseInt(this.listData[i].type) !== 3 && parseInt(this.listData[i].type) !== 4) {
						await this.getRecorderStatus(i);
					} else {
						//推拉流设备默认可以预览
						this.listData[i].preview = true;
						this.listData[i].loading = false;
					}
				}
			}
		},
		//异步加载设备状态
		getRecorderStatus: function getRecorderStatus(inx) {
			var _this13 = this
			// console.log(this.listData[inx],'设备index')
			this.listData[inx].loading = true;
			this.listData[inx].opArr = [];
			//默认不可以预览
			this.listData[inx].preview = false;
			let success = (data => {
				// console.log(data.data,'操作通用:', this.operateCommonArr,'设备状态:',this.operateArr)
				if (!is_empty(_this13.operateCommonArr[_this13.listData[inx].type][data.data._STATUS]) && _this13.operateCommonArr[_this13.listData[inx].type][data.data._STATUS].length > 0) {

					_this13.listData[inx].preview = true;
					for (var i = _this13.operateCommonArr[_this13.listData[inx].type][data.data._STATUS].length - 1; i >= 0; i--) {
						var op = {
							code: _this13.operateCommonArr[_this13.listData[inx].type][data.data._STATUS][i],
							txt: _this13.operateArr[_this13.operateCommonArr[_this13.listData[inx].type][data.data._STATUS][i]]
						};
						if (!is_empty(op.code) && !is_empty(op.txt)) {
							_this13.listData[inx].opArr.push(op);
						}
					}
				}
				//添加当前状态
				_this13.listData[inx].opArr.unshift({ code: -1, txt: data.data._STATUS });
				// console.log(data.data._STATUS,'data.data._STATUS')
				if (!is_empty(data.data._STATUS) && data.data._STATUS == '停止') {
					_this13.listData[inx].opArr.push({ code: 15, txt: _this13.operateArr[15] });
				} else if (is_empty(data.data._STATUS) && data.data._STATUS == '录播') {
					_this13.listData[inx].opArr = [];
					_this13.listData[inx].opArr.push({ code: 14, txt: _this13.operateArr[14] })
					_this13.listData[inx].opArr[0] = { code: -1, txt: '关机状态' };
				}
				if (parseInt(_this13.listData[inx].type) === 0 && data.data._STATUS == '无法连接') {
					_this13.listData[inx].opArr.splice(1, 0, { code: 0, txt: _this13.operateArr[0] });
				}
				//下拉第一个选项作为当前状态
				_this13.listData[inx].recorder_status = -1;
				_this13.listData[inx].loading = false;
			})
			//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
			this.$ajax.get('api/recorder/recorder_status_xunjian', { params: { id: this.listData[inx].id }, func: { success: success } })

		},
		btcActive(index) {
			this.isActive = index;
			this.listParam.page_index = 1;
			this.listParam.page_size = this.btn[index].size;
			this.getRecorderData();
		},
		handleOpen(key, keyPath) {
			this.listParam.inspection_id = this.getInspectionData[key].id;
			this.listParam.page_index = 1;
			document.getElementById('hiddenmenu').click();

			this.getRecorderData();
		},
		handleClose(key, keyPath) {
		},
	}
}
</script>

<style lang="scss">
.zh-classroom-visits {
	height: 100%;

	.zh-common-title+.el-tabs .el-tabs__header {
		width: 75% !important;
	}

	.el-cascader-node>.el-radio {
		display: block !important;
	}

	.video-js.vjs-4-3,
	.video-js.vjs-16-9,
	.video-js.vjs-fluid {
		height: 100%;
	}

	.paly-tips {
		position: absolute;
		right: 40px;
		bottom: 10px;
		font-size: 12px;
		color: #808080;
		letter-spacing: 1px;
	}

	#hiddenmenu {
		height: 0;
	}

	.zh-common-title+.el-tabs {
		position: absolute;
		left: 0;
		width: 100%;
		height: 100%;

		.el-tabs__header {
			// display: none;
			margin: auto;
			margin-bottom: 15px;
			width: 80%;
		}

		.el-tabs__content {
			height: 100%;
		}
	}

	.resetBtns {
		position: absolute;
		top: 75px;
		right: 35px;
		z-index: 999;
	}
}

.classroom-pane {
	.course-setup {
		position: relative;
		height: 60px;
		background-color: #BDEFFF;

		.course-setup-h {
			line-height: 60px;
			padding: 0 20px;
			font-size: 14px;

			>i {
				font-size: 22px;
				margin-top: 16px;
				cursor: pointer;

				&:hover {
					color: #348efc;
				}
			}
		}

		.course-setup-op {
			position: absolute;
			top: 60px;
			left: 0;
			background: #fff;
			padding: 20px;
			z-index: 3;
			width: 200px;
			font-size: 14px;

			>p {
				line-height: 40px;
			}

			.course-setup-off {
				margin-top: 15px;
			}

			.course-setup-time {
				margin-top: 25px;

				.el-form-item {
					display: inline-block;
				}

				.el-form-item:first-child {
					width: 116px;
				}

				>div {
					display: inline-block;
					vertical-align: top;
				}

				.el-input {
					width: 120px;

				}

				.el-select {
					width: 70px;

					.el-input {
						width: 100%;
					}

					.el-input__inner {
						border-left: 0;
					}
				}

				.el-input__inner {
					padding: 0;
					text-indent: 12px;
					border-radius: 0;
				}
			}

			.course-setup-btn {
				margin-top: 20px;
				padding-right: 20px;
				text-align: right;

				.el-button {
					padding: 8px 15px;
				}
			}
		}
	}

	.xun {
		background-image: url('../../../../static/image/xun.png');
		background-repeat: no-repeat;
		display: inline-block;
		vertical-align: top;
	}

	.xunke_but1 {
		background-position: -103px 0px;
		width: 88px;
		height: 57px;
	}

	.xunke_but11 {
		background-position: 0px -216px;
		width: 88px;
		height: 57px;
	}

	.xunke_but1_slide {
		background-position: -309px -189px;
		width: 15px;
		height: 30px;
	}

	.xunke_but1_up {
		background-position: -369px -144px;
		width: 15px;
		height: 30px;
	}

	.xunke_but2 {
		background-position: -206px 0px;
		width: 88px;
		height: 57px;
	}

	.xunke_but22 {
		background-position: -206px -72px;
		width: 88px;
		height: 57px;
	}

	.xunke_but2_slide {
		background-position: -339px -144px;
		width: 15px;
		height: 30px;
	}

	.xunke_but2_up {
		background-position: -309px -144px;
		width: 15px;
		height: 30px;
	}

	.xunke_but3 {
		background-position: -206px -144px;
		width: 88px;
		height: 57px;
	}

	.xunke_but33 {
		background-position: 0px 0px;
		width: 88px;
		height: 57px;
	}

	.xunke_but4 {
		background-position: -103px -216px;
		width: 88px;
		height: 57px;
	}

	.xunke_but44 {
		background-position: -206px -216px;
		width: 88px;
		height: 57px;
	}

	.xunke_but5 {
		background-position: -309px 0px;
		width: 88px;
		height: 57px;
	}

	.xunke_but55 {
		background-position: -103px -144px;
		width: 88px;
		height: 57px;
	}

	.xunke_but6 {
		background-position: 0px -144px;
		width: 88px;
		height: 57px;
	}

	.xunke_but66 {
		background-position: -103px -72px;
		width: 88px;
		height: 57px;
	}

	.xunke_but7 {
		background-position: 0px -72px;
		width: 88px;
		height: 57px;
	}

	.xunke_but77 {
		background-position: -309px -72px;
		width: 88px;
		height: 57px;
	}

	.tour-course {
		background: #EFFAFF;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		font-size: 0;
		overflow: hidden;

		>div {
			text-align: left;
			text-align-last: initial;
			height: 100%;
			display: inline-block;
			vertical-align: top;
		}
	}

	.videoPN {
		width: 100%;
		height: 100%;
		text-align: justify;
		text-align-last: justify;
	}

	.el-menu {
		border: 0;
		background: none;

		.el-submenu {
			.el-menu-item {
				padding: 0 45px !important;
			}
		}

		.el-icon-location,
		.el-submenu__title {
			font-size: 14px;
			background-color: #D0EBF4;
		}

		.el-submenu__title,
		.el-menu .el-menu-item {
			display: flex;
			align-items: center;
			padding: 5px 0;
			height: auto;
			line-height: 25px;
			word-break: break-all;
			word-wrap: break-word;
			white-space: normal;
		}

		.el-submenu__title {
			width: calc(100% - 10px);
			min-height: 50px;
		}

		.el-menu .el-menu-item {
			min-height: 40px;
		}
	}

	.menuNev {
		height: 400px !important;
		overflow: hidden;
		overflow-y: auto;

		.el-scrollbar__bar.is-horizontal {
			display: none;
			opacity: 0;
		}

		.el-scrollbar__wrap {
			overflow: auto;
		}

		.el-menu-vertical-demo {
			>li {
				border-bottom: 1px solid #D0EBF4;

				>div {
					border-bottom: 1px solid #D0EBF4;
				}

				ul>li {
					border-bottom: 1px solid #D0EBF4;
				}
			}
		}
	}

	.nothing-logo {
		position: relative;

		>div {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			img {
				max-width: 100%;
			}

			>div {
				padding: 5px 0 0;
				color: #9999A6;
				font-size: 14px;
				text-align: center;
			}
		}
	}

	.video-mode {
		height: calc(100% - 545px);
	}

	.video-mode-l {
		padding: 10px;
		height: calc(100% - 55px);
		overflow-y: overlay;

		>button {
			background: none;
			outline: none;
			border: 0;
			padding: 0;
			padding: 5px 10px;
			cursor: pointer;
		}

		.active {
			background: #a7d6ff;
		}
	}

	.video-mode-h {
		border-bottom: 1px solid #C4E2EB;
		font-size: 14px;
		height: 54px;
		line-height: 54px;
		padding: 0 20px;
	}

	.tour-course-menu {
		background: #DFF3F9;
		width: 240px;
		overflow: hidden;

		.el-menu-item.is-active {
			color: #ffffff;
			// background: #DFF3F9;
		}

		.campus-partition {
			padding-left: 25px;
			font-size: 14px;
			width: 100%;
			height: 60px;
			line-height: 60px;
			background-color: #BDEFFF;
		}

		.checked_vc {
			text-align: center;
			font-size: 14px;

			span {
				display: inline-block;
				padding: 18px 0;
				width: 100%;
				cursor: pointer;
			}

			.is-active {
				color: #fff;
				background-color: #348EFC;
			}
		}
	}

	.course-video {
		position: relative;
		width: calc(100% - 240px);
	}

	.course-mb {
		height: 90%;
		width: 100%;
		margin: 3% auto 0;
		position: relative;

		>.el-button {
			font-size: 30px;
			color: #999;
			position: absolute;
			top: 46%;

			&:nth-of-type(1) {
				left: 0;
			}

			&:nth-of-type(2) {
				right: 0;
			}

			&:hover {
				color: #409EFF;
			}
		}

		>div {
			width: 95%;
			height: 100%;
			text-align: justify;
			text-align-last: justify;
			margin: auto;

		}
	}

	.videoMp {
		position: relative;
		background: linear-gradient(#4977F7, #5274F4, #5E71F1, #686EED, #746AE9, #7E68E7);
		display: inline-block;
		vertical-align: top;
		text-align: left;
		text-align-last: initial;

		.no-signal {
			position: relative;
			text-align: center;
			top: 50%;
			transform: translateY(-50%);
			font-size: 24px;
			color: #fff;
		}
	}

	.video_1 {
		width: 695/1400*100%;
		height: 395/806*100%;
		margin-bottom: 10/1400*100%;
		margin-right: 10/1400*100%;

		&:nth-of-type(2n) {
			margin-right: 0;
		}
	}

	.videoPN_l,
	.videoPN_r,
	.videoPN_vl,
	.videoPN_vr {
		display: inline-block;
		vertical-align: top;
		height: 100%;
	}

	.videoPN_l {
		width: 39.5%;

		.video_2 {
			width: 100%;
			height: 262/806*100%;
			margin-bottom: 10/555*100%;
		}
	}

	.videoPN_r {
		width: 60%;

		.video_2r {
			width: 100%;
			height: 100%;
		}
	}

	.videoPN_vl {
		width: 49.5%;

		.video_3 {
			width: 100%;
			height: 100%;
		}
	}

	.videoPN_vr {
		width: 50%;

		.video_3 {
			width: 100%;
			height: 49%;
			margin-bottom: 2%;
		}
	}

	.video_4 {
		width: 460/1400*100%;
		height: 260/806*100%;
		margin-bottom: 10/1400*100%;
		margin-right: 10/1400*100%;

		&:nth-of-type(3n) {
			margin-right: 0;
		}
	}

	.video_5 {
		width: 345/1400*100%;
		height: 260/806*100%;
		margin-bottom: 10/1400*100%;
		margin-right: 5/1400*100%;

		&:nth-of-type(4n) {
			margin-right: 0;
		}
	}

	.video_6 {
		width: 345/1400*100%;
		height: 197/806*100%;
		margin-bottom: 5/1400*100%;
		margin-right: 5/1400*100%;

		&:nth-of-type(4n) {
			margin-right: 0;
		}
	}

	.video_7 {
		width: 345/1400*100%;
		height: 157/806*100%;
		margin-bottom: 5/1400*100%;
		margin-right: 5/1400*100%;

		&:nth-of-type(4n) {
			margin-right: 0;
		}
	}

	// when the input box type is number,Control the up and down arrow does not display
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}

	input[type="number"] {
		-moz-appearance: textfield;
	}
}</style>
